<template>
	<view class="box" v-if="dialog">
		<view class="mainContent">
			<view class="search">
				姓名：<input type="text" v-model="searchContent"/>
				<span @click="memberList">查询</span>
				<span @click="hidedialog">确认</span>
				<image mode="widthFix" src="@/static/img/close.png" @click="hidedialog"></image>
			</view>
			<view class="uni-list vipList" v-if="list && list.length > 0">
				<u-table>
					<u-tr>
						<u-th></u-th>
						<u-th>姓名</u-th>
						<u-th>性别</u-th>
						<u-th>年龄</u-th>
					</u-tr>
					<radio-group  @change="radioChange">
						<u-tr v-for="(item, index) in list" :key="index">
							<u-td style="width: 40upx;"><radio :value="JSON.stringify(item)" :checked="item.realName == current" /></u-td>
							<u-td><span @click="radioChange(item,index)">{{item.realName}}</span></u-td>
							<u-td><span @click="radioChange(item,index)">{{item.sex == 1? '男':'女'}}</span></u-td>
							<u-td><span @click="radioChange(item,index)">{{age('',item.birthday)}}</span></u-td>
							<!-- new Date().getFullYear() - Number(item.birthday && item.birthday.substr(0,4)) -->
						</u-tr>
					</radio-group>
				</u-table>
			</view>
			<view class="tips" v-else>没有搜索到相关数据</view>
		</view>
	</view>
</template>

<script>
	import {age} from "@/static/js/filter.js"
	export default {
		props:{
			dialog:{
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				searchContent: '',
				list: [],
				pageSize: 20,
				pageIndex: 1,
				userName: '',
				userId: '',
				current: 0
			};
		},
		mounted() {
			this.memberList()
		},
		methods:{
			age,
			// 获取会员列表数据
			memberList() {
				const data = this.searchContent?{str: this.searchContent,pageSize:this.pageSize,pageIndex:this.pageIndex}:{pageSize:this.pageSize,pageIndex:this.pageIndex}
				this.$api.userMember(data).then((res) => {
					if (res.data.returnCode == 200) {
						this.list =  res.data.result && res.data.result.list;
					}
				})
			},
			hidedialog(){
				this.$emit('hidedialog');
			},
			radioChange(e,index) {
				this.$set(this,'current',e.realName)
                const userId = e.detail? JSON.parse(e.detail.value).userId : e.userId
                this.list && this.list.map((res) => {
                    if (res.userId == userId) {
                        // this.userName = res.realName;
                        // this.userId = res.userId;
                        this.$emit('chooseUser',{userName:res.realName,userId:res.userId,phone:res.phone,sex:res.sex,birthday:res.birthday})
                    }
                })
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.5) !important;
		z-index: 200;
		.mainContent {
			padding:2vh 2vw;
			position: absolute;
			width: 95vw;
			height: 76vh;
			left: 2.5vw;
			top: 10vh;
			background: #fff;
			.close {
				position: absolute;
				right: 3%;
				top: 1%;
				width: 48upx;
				height: 48upx;
			}
			.search{
				display: flex;
				font-size: 26upx;
				align-items: center;
				margin-bottom: 30upx;
				input{
					width: 200upx;
					height: 50upx;
					padding-left: 10upx;
					border: 1upx solid #ccc;
					border-radius: 8upx;
				}
				span{
					display: inline-block;
					padding: 8upx 18upx;
					border: 1upx solid #ccc;
					color: #000;
					margin-left: 20upx;
					border-radius: 8upx;
				}
				image{
					width: 40upx;
					margin-left: 40upx;
				}
			}
			.vipList {
				.affirm {
					display: inline-block;
					padding: 22upx 94upx;
					background-color: #38CB97;
					color: #fff;
					border-radius: 12upx;
					font-size: 32upx;
					position: absolute;
					bottom: 10px;
					left: 50%;
					transform: translateX(-50%);
				}
			}
			/deep/ .uni-radio-input{
				width: 40upx;
				height: 40upx;
			}
			.u-tr{
				.u-th{
					&:nth-of-type(1){
						width: 100upx !important;
						flex:unset;
					}
				}
				.u-td{
					height: unset !important;
					&:nth-of-type(1){
						width: 100upx !important;
						flex:unset;
					}
				}
			}
			.u-th{
				background: #38cb97;
				color: #fff;
			}
		}
	}
</style>
